<template>
  <div id="manage">
    <!-- 图表 -->
    <eachartsTwo></eachartsTwo>
    <!-- 留言信息 -->
    <el-alert :title="'当前未读消息有'+messageData.length+'条'" type="warning" center show-icon :closable="false"> </el-alert>
    <el-table
      :data="messageData"
      empty-text="暂时还没任何数据哦"
      stripe
      border
      height="300" style="width: 100%"
    >
      <el-table-column
        label="留言时间"
        align="center"
      >
        <template #default='scope'>
          {{conversionDate(scope.row.date)}}
        </template>
      </el-table-column>
      <el-table-column
        label="留言者"
        align="center"
        prop="name"
      >
      </el-table-column>
      <el-table-column
        label="电子邮箱"
        align="center"
        prop="email"
      ></el-table-column>
      <el-table-column
        label="联系方式(电话)"
        align="center"
        prop="phone"
      ></el-table-column>
      <el-table-column
        label="留言内容"
        align="center"
        prop="message"
      ></el-table-column>
      <el-table-column
        label="是否已读"
        align="center"
      >
        <template #default="scope">
          <el-switch v-model="scope.row.read" :disabled='scope.row.read' @change="processingMessages(scope.row)"> </el-switch>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
      >
        <template #default="scope">
          <el-button type="danger" icon="el-icon-delete" circle @click="open(scope.row)"></el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-alert :title="'当前未读消息有'+messageRead.length+'条'" type="success" center show-icon :closable="false"> </el-alert>
     <el-table
      :data="messageRead"
      empty-text="暂时还没任何数据哦"
      stripe
      border
      height="300" style="width: 100%"
    >
      <el-table-column
        label="留言时间"
        align="center"
      >
        <template #default='scope'>
          {{conversionDate(scope.row.date)}}
        </template>
      </el-table-column>
      <el-table-column
        label="留言者"
        align="center"
        prop="name"
      >
      </el-table-column>
      <el-table-column
        label="电子邮箱"
        align="center"
        prop="email"
      ></el-table-column>
      <el-table-column
        label="联系方式(电话)"
        align="center"
        prop="phone"
      ></el-table-column>
      <el-table-column
        label="留言内容"
        align="center"
        prop="message"
      ></el-table-column>
      <el-table-column
        label="是否已读"
        align="center"
      >
        <template #default="scope">
          <el-switch v-model="scope.row.read" :disabled='scope.row.read' @change="processingMessages(scope.row)"> </el-switch>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
      >
        <template #default="scope">
          <el-button type="danger" icon="el-icon-delete" circle @click="open(scope.row)"></el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
 
<script>
import eachartsTwo from "@/components/echarts/message"
export default {
  name: '',
  data(){
    return{
      messageData:[],
      messageRead:[]
    }
  },
  methods:{
    // 留言未读数据
    async getMessageData(){
      let {data} = await this.$axios.post("/getMes",{
        read:false
      })
      if(data.code) return this.$message.warning(data.mes)
      this.messageData = data.data
    },
    // 留言已读数据
    async getMessageReadAll(){
      let {data} = await this.$axios.post("/getMes",{
        read:true
      })
      if(data.code) return this.$message.warning(data.mes)
      this.messageRead = data.data
    },
     // 日期转化
    conversionDate(date){
      let time = new Date(date)
      let y = time.getFullYear()
      let month = time.getMonth()+1<10?"0"+( time.getMonth()+1): time.getMonth()+1
      let day = time.getDate()<10?"0"+time.getDate():time.getDate()
      let h = time.getHours()<10?"0"+time.getHours():time.getHours()
      let f = time.getMinutes()<10?"0"+time.getMinutes():time.getMinutes()
      let s = time.getSeconds()<10?"0"+time.getSeconds():time.getSeconds()
      return `${y}-${month}-${day} ${h}:${f}:${s}`
    },
    // 消息处理
    async processingMessages(item){
      let {data} = await this.$axios.post("/update/read",{
        _id:item._id,
        read:item.read
      })
      if(data.code) return this.$message.warning(data.mes)
      this.$message.success(data.mes)
      // 更新数据
      this.getMessageData()
      this.getMessageReadAll()
    },
    // 删除提示
    open(item) {
      this.$confirm('确认删除该条留言吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
      .then(() => {
        // 删除留言
        this.deleteMes(item)
      })
      .catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除',
        })
      })
    },
    // 留言删除
    async deleteMes(item){
      let {data} = await this.$axios.post("/delete/deleteMes",{
        _id:item._id
      })   
      if(data.code) return this.$message.warning(data.mes)
      this.$message.success(data.mes)
      // 更新数据
      this.getMessageData()
      this.getMessageReadAll()
    }
  },
  mounted(){
    // 留言获取
    this.getMessageData()
    this.getMessageReadAll()
  },
  components:{
    eachartsTwo
  }
}
</script>

<style scoped lang='less'>
#manage{
  
}
</style>